<template>
  <div class="pay-for-knowledge">
    <Header></Header>
    <div class="banner-wrap">
      <div class="banner main-container">
        <img src="~@/assets/img/img_13_34.jpg" alt />
        <div class="content">
          <h1>知识付费</h1>
          <p>一分钟创建知识店铺</p>
          <p>直播课堂 知识变现 督学助学 全网分销</p>
          <button @click="$router.push({name:'login'})">了解更多</button>
        </div>
      </div>
    </div>
    <div class="section-list">
      <div class="section section1">
        <div class="section-inner">
          <div class="tit-container scrollRevealTop0">
            <div class="tit">知识付费-全网分销快速变现</div>
          </div>
          <div class="section-body">
            <ul>
              <li class="scrollRevealTop0">
                <img src="~@/assets/img/img_3_40.png" alt />
                <div class="text-wrap">
                  <h1>内容</h1>
                  <p>直播+录播打造优质课程</p>
                </div>
              </li>
              <li class="scrollRevealTop0">
                <img src="~@/assets/img/img_3_35.png" alt />
                <div class="text-wrap">
                  <h1>拓客</h1>
                  <p>打通主流平台突破流量局限</p>
                </div>
              </li>
              <li class="scrollRevealTop0">
                <img src="~@/assets/img/img_3_7.png" alt />
                <div class="text-wrap">
                  <h1>付费</h1>
                  <p>多营销手段促进购买</p>
                </div>
              </li>
              <li class="scrollRevealTop0">
                <img src="~@/assets/img/img_3_34.png" alt />
                <div class="text-wrap">
                  <h1>裂变</h1>
                  <p>分销拼团持续裂变销售</p>
                </div>
              </li>
              <li class="scrollRevealTop0">
                <img src="~@/assets/img/img_3_33.png" alt />
                <div class="text-wrap">
                  <h1>督学</h1>
                  <p>多种督学方式曾强粘性</p>
                </div>
              </li>
              <li class="scrollRevealTop0">
                <img src="~@/assets/img/img_3_29.png" alt />
                <div class="text-wrap">
                  <h1>管理</h1>
                  <p>精细化学员管理提高复购</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="section style1">
        <div class="section-inner">
          <div class="tit-container scrollRevealTop0">
            <div class="tit">多平台打通突破流量局限</div>
          </div>
          <div class="section-body scrollRevealTop0">
            <img src="~@/assets/img/img_3_2.png" alt />
            <p>
              微信 抖音 支付宝 百度
              <br />多模板一键生成小程序
              <br />统一管理跨平台内容同步
              <br />主流新媒体共筑私域流量
            </p>
            <button @click="$router.push({name:'login'})">了解更多</button>
          </div>
        </div>
      </div>

      <div class="section style1">
        <div class="section-inner">
          <div class="tit-container scrollRevealTop0">
            <div class="tit">形式多样加持优质内容</div>
          </div>
          <div class="section-body scrollRevealTop0">
            <img src="~@/assets/img/img_3_26.png" alt />
            <p>
              大班课 公开课 小班课
              <br />图文 音频 视频多种形式
              <br />专栏 连载打造系列课程
              <br />自有课程+课程合作分销
            </p>
            <button @click="$router.push({name:'login'})">了解更多</button>
          </div>
        </div>
      </div>

      <div class="section section2">
        <div class="section-inner">
          <div class="tit-container scrollRevealTop0">
            <div class="tit">助学互动增强会员粘性</div>
          </div>
          <div class="section-body scrollRevealTop0">
            <div class="wrap_box">
              <template v-for="(item,index) in swiper1.data">
                <div
                  class="wrap"
                  @mouseenter="$refs.swiper1.$swiper.slideTo(index);"
                  :key="item.label"
                  :class="{on:index==swiper1.active_index}"
                >
                  <span>{{item.label}}</span>
                </div>
              </template>
            </div>
            <div class="tab-content">
              <div class="phone_bg">
                <!-- <img src="~@/assets/imgs/phone/phone.png" alt /> -->
              </div>
              <swiper class="swiper" ref="swiper1" :options="swiper1.option">
                <swiper-slide v-for="item in swiper1.data" :key="item.label">
                  <img :data-src="item.large_img" class="swiper-lazy" />
                  <div class="swiper-lazy-preloader"></div>
                </swiper-slide>
              </swiper>
            </div>
            <button @click="$router.push({name:'login'})">了解更多</button>
          </div>
        </div>
      </div>

      <div class="section style1">
        <div class="section-inner">
          <div class="tit-container scrollRevealTop0">
            <div class="tit">精细化管理提高复购率</div>
          </div>
          <div class="section-body scrollRevealTop0">
            <img src="~@/assets/img/img_3_36.png" alt />
            <p>
              VCRM管理更精细化
              <br />积分/等级增加学员粘性
              <br />个性化推荐提高复购
              <br />数据分析辅助经营决策
            </p>
            <button @click="$router.push({name:'login'})">了解更多</button>
          </div>
        </div>
      </div>

      <tryOut></tryOut>
    </div>
    <Footer></Footer>
    <fixed-btn></fixed-btn>
  </div>
</template>

<script>
import Header from "@/components/header";
import Footer from "@/components/footer";
import FixedBtn from "@/components/FixedBtn";
import tryOut from "@/components/tryOut";
import common from "@/assets/js/common";
import config from "@/assets/js/config";

//import $ from "jquery";

export default {
  mixins: [common],
  name: "pay-for-knowledge",
  components: {
    Header,
    Footer,
    FixedBtn,
    tryOut
  },
  data() {
    var _this = this;
    return {
      swiper1: {
        active_index: 0,
        data: [
          {
            large_img: require("@/assets/img/img_3_42.png"),
            label: "督学打卡"
          },
          {
            large_img: require("@/assets/img/img_3_41.png"),
            label: "签到积分"
          },
          {
            large_img: require("@/assets/img/img_3_45.png"),
            label: "题库考试"
          },
          {
            large_img: require("@/assets/img/img_3_43.png"),
            label: "学院社区"
          }
        ],
        option: {
          lazy: true,
          // direction: "vertical",
          // loop: true,
          autoplay: {
            delay: 3000,
            stopOnLastSlide: false,
            disableOnInteraction: false
          },
          on: {
            slideChange: function() {
              _this.swiper1.active_index = this.realIndex;
            }
          }
        }
      }
    };
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
@import "@/views/pay-for-knowledge/pay-for-knowledge";
</style>
